<template>
  <div class="Main_box">
    <!-- <div class="main_left"> -->
    <dv-border-box-8 class="main_left">
      <div class="title_top">
        乡镇收入支出金额
      </div>
      <div class="left_zhu">
        <VEcharts
          v-if="optsLeft"
          autoresize
          :options="optsLeft"
          style="width: 100%; height: 100%"
        />
      </div>
    </dv-border-box-8>
    <!-- </div> -->
    <div class="main_mid">
      <div class="main_mid_top">
        <div v-for="(item, index) in midTopList" :key="index" class="top_list">
          <p>{{ item.title }}</p>
          <!-- <span class="animated flash infinite">{{ item.num }}</span> -->
          <span>{{ item.num }}</span>
        </div>
      </div>
      <dv-border-box-8 class="main_mid_map">
        <div class="btn3">
          <div v-for="(item, index) in btnList" :key="index" class="btnlist">
            <img
              v-if="index === 0"
              src="~@/assets/images/fullscreen/财政补助.png"
              alt=""
            >
            <img
              v-if="index === 1"
              src="~@/assets/images/fullscreen/财政补助 (1).png"
              alt=""
            >
            <img
              v-if="index === 2"
              src="~@/assets/images/fullscreen/财政补助 (2).png"
              alt=""
            >
            <div :class="index === 0 ? 'btn0' : index === 1 ? 'btn1' : 'btn2'">
              <span>{{ item.title }}</span>
              <p>{{ item.num }}</p>
            </div>
          </div>
        </div>
        <div
          v-for="(item, index) in iconData"
          :key="index"
          class="icon animated pulse infinite"
          :style="`left:${item.left};top:${item.top}`"
          @click="getDetails(item.name)"
        >
          {{ item.num }}
        </div>
        <map-echarts @into-town="goTown" />
      </dv-border-box-8>
      <dv-border-box-8 class="main_mid_bot">
        <div class="title_bot">
          分组柱状图
        </div>
        <div class="main_Mid_zhu">
          <VEcharts
            v-if="optsMid"
            autoresize
            :options="optsMid"
            style="width: 100%; height: 100%"
          />
        </div>
      </dv-border-box-8>
    </div>
    <div class="main_right">
      <div class="main_right_top">
        <div
          v-for="(item, index) in rightTopList"
          :key="index"
          class="main_right_list"
        >
          <p>{{ item.title }}</p>
          <span>{{ item.num }}</span>
        </div>
      </div>
      <dv-border-box-8 class="main_right_bot">
        <div class="title_right">
          <div class="title_list">
            <h3>项目明细</h3>
          </div>
          <!-- <div class="details_right">查看详情</div> -->
        </div>
        <div class="table_list">
          <dv-scroll-board
            :config="config"
            style="height:90%;color:#32C5FF;border-radius: 8px;"
            @click="getECard"
          />
        </div>
      </dv-border-box-8>
    </div>
    <a-modal
      title="齐贤"
      :visible="tableVisible"
      width="50%"
      cancel-text="取消"
      ok-text="确定"
      @ok="tableOk"
      @cancel="tableCancel"
    >
      <table-common
        :menu-id="menuId"
        :title="title"
        :filter-list="filterList"
        :form-guid="formGuid"
        :is-show="false"
        :is-search="false"
      />
    </a-modal>
  </div>
</template>
<script>
import VEcharts from '@/components/vecharts';
import MapEcharts from '../mapecharts';
import { getQueryBodyByProduce } from '@/api/dynamicInterface';
import tableCommon from '@/components/tableCommon/index.vue';
// const sendRequest = function(data) {
//   return getQueryBodyByProduce(data);
// };

export default {
  components: {
    VEcharts,
    MapEcharts,
    tableCommon
  },
  data() {
    return {
      optsMidData: {
        month: [],
        sr: [],
        zc: []
      },
      midTopList: [
        {
          title: '收入预算(万元)',
          num: '0'
        },
        {
          title: '收入实绩(万元)',
          num: '0'
        },
        {
          title: '完成率(%)',
          num: '0'
        },
        {
          title: '支出预算(万元)',
          num: '0'
        },
        {
          title: '实际支出(万元)',
          num: '0'
        },
        {
          title: '执行率(%)',
          num: '0'
        }
      ],
      rightTopList: [
        {
          title: '人员经费',
          num: '-'
        },
        {
          title: '公用经费',
          num: '-'
        },
        {
          title: '专项经费',
          num: '-'
        },
        {
          title: '拆迁经费',
          num: '-'
        }
      ],
      btnList: [
        {
          title: '蓝色预警:',
          num: 3
        },
        {
          title: '橙色预警:',
          num: 0
        },
        {
          title: '红色预警:',
          num: 0
        }
      ],
      iconData: [
        { name: '杨汛桥', num: 0, left: '21.6%', top: '21%' },
        { name: '钱清', num: 0, left: '32%', top: '22%' },
        { name: '安昌', num: 0, left: '42%', top: '16%' },
        { name: '齐贤', num: 3, left: '49%', top: '19%' },
        { name: '马鞍', num: 0, left: '62.5%', top: '6.5%' },
        { name: '夏履', num: 0, left: '26%', top: '32%' },
        { name: '湖塘', num: 0, left: '31.5%', top: '34%' },
        { name: '华舍', num: 0, left: '38.4%', top: '22.8%' },
        { name: '柯桥', num: 0, left: '44.5%', top: '28.8%' },
        { name: '柯岩', num: 0, left: '37.9%', top: '32.5%' },
        { name: '漓渚', num: 0, left: '34%', top: '47%' },
        { name: '福全', num: 0, left: '45%', top: '41%' },
        { name: '兰亭', num: 0, left: '40.2%', top: '56%' },
        { name: '平水', num: 0, left: '54%', top: '60.5%' },
        { name: '稽东', num: 0, left: '49%', top: '76%' },
        { name: '王坛', num: 0, left: '61%', top: '74.5%' }
      ],
      config: {},
      leftList: { ENTERPRISENAME: [], SR: [], ZC: [] },
      MidBotList: [],
      tableList: [],
      leftListFu: { SR: [], ZC: [] },
      timer: null,
      menuId: undefined,
      title: '',
      formGuid: '',
      tableVisible: false,
      filterList: []
    };
  },
  computed: {
    optsLeft() {
      // const _this = this;
      const newArr = {
        color: ['rgba(91,143,249,0.85)', 'rgba(90,216,166,0.85)'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // Use axis to trigger tooltip
            type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
          }
        },
        legend: {
          // orient: 'vertical',
          data: ['支出', '收入'],
          left: '5%',
          top: '0%',
          textStyle: {
            // 图例文字的样式
            color: '#ffffff;',
            fontSize: 12
          }
        },
        grid: {
          top: '6%',
          left: '1%',
          right: '10%',
          bottom: '6%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          show: false
        },
        yAxis: {
          axisLabel: {
            interval: 0,
            rotate: 40,
            fontSize: 16
          },
          type: 'category',
          data: this.leftList.ENTERPRISENAME,
          axisLine: {
            lineStyle: {
              color: '#32c5ff'
            }
          }
        },
        series: [
          {
            name: '支出',
            type: 'bar',
            stack: 'total',
            barMaxWidth: '50',
            label: {
              show: true
            },
            emphasis: {
              focus: 'series'
            },
            itemStyle: {
              normal: {
                label: {
                  show: false, // 是否显示
                  position: 'right', // 显示位置
                  textStyle: {
                    // 文字样式
                    color: 'rgba(91,143,249,0.85)',
                    fontSize: '15'
                  }
                }
              }
            },
            data: this.leftList.ZC
          },
          {
            name: '收入',
            type: 'bar',
            stack: 'total',
            barMaxWidth: '50',
            label: {
              show: true
            },
            emphasis: {
              focus: 'series'
            },
            itemStyle: {
              normal: {
                label: {
                  show: false, // 是否显示
                  position: 'right', // 显示位置
                  textStyle: {
                    // 文字样式
                    color: '#1fd2ff',
                    fontSize: '15'
                  }
                }
              }
            },
            data: this.leftList.SR
          }
        ]
      };
      return newArr;
    },
    optsMid() {
      const newArr = {
        color: ['rgba(91,143,249,0.85)', 'rgba(90,216,166,0.85)'],
        xAxis: {
          // axisLabel: {
          //   interval: 0,
          //   rotate: 25,
          //   fontSize: 12
          // },
          type: 'category',
          data: this.optsMidData.month,
          axisLine: {
            lineStyle: {
              color: '#32c5ff'
            }
          }
        },

        tooltip: {
          trigger: 'axis',
          position: ['0%', '-25%'],
          axisPointer: { // Use axis to trigger tooltip
            type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
          }
        },

        legend: {
          // orient: 'vertical',
          // data: ['收入', '支出'],

          data: ['支出'],
          left: '0',
          top: '0%',
          textStyle: {
            // 图例文字的样式
            color: '#ffffff;',
            fontSize: 12
          }
        },
        grid: {
          top: '22%',
          left: '1%',
          right: '6%',
          bottom: '2%',
          containLabel: true
        },
        yAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: '#32c5ff'
            }
          },
          axisLabel: {
            fontSize: 12
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed',
              color: 'rgba(255,255,255,0.45)'
            }
          }
        },
        series: [
          // {
          //   name: '收入',
          //   data: this.optsMidData.sr,
          //   type: 'bar',
          //   showBackground: true,
          //   backgroundStyle: {
          //     color: ' rgba(91,143,249,0.85)'
          //   }
          // },
          {
            name: '支出',

            data: this.optsMidData.zc,
            type: 'bar',
            showBackground: true,

            backgroundStyle: {
              color: ' rgba(90,216,166,0.85)'
            }
          }
        ]
      };
      return newArr;
    },
    menuList() {
      let list = [];
      this.$store.state.permission.menuList.map(o => {
        if (o.title === '全景图') {
          list = o.children;
        }
      });
      return list.filter(item => item.name.includes('special'));
    }
  },
  created() {
    this.getLeft();
    this.getMidTop();
    this.initPage();
  },
  mounted() {
    this.timer = setInterval(() => {
      this.leftList.SR = [];
      this.leftList.ZC = [];
      setTimeout(() => {
        this.leftList.SR = this.leftListFu.SR;
        this.leftList.ZC = this.leftListFu.ZC;
      }, 800);
    }, 8000);
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
  methods: {
    goTown(e) {
      if (e.name === '齐贤') {
        const params = {
          path: '/townPreviewKq',
          query: {
            ENTERPRISENAME: e.name
          }
        };
        this.$router.push(params);
      }
    },
    initPage() {
      const {
        getBarByGroup,
        getRecordFunding,
        getTableData
      } = this;

      getBarByGroup();
      getRecordFunding();
      getTableData();
    },

    // 分组柱状图
    getBarByGroup() {
      getQueryBodyByProduce({
        tableId: 576
      }).then(res => {
        if (res.success) {
          const [m, z] = [[], [], []];
          res.data.forEach(item => {
            const {
              PAYDATE, PAYMONEY
            } = item;

            m.push(PAYDATE + '月');
            // f.push(SR);
            z.push(PAYMONEY);
          });
          this.optsMidData.month = m;
          // this.optsMidData.sr = f;
          this.optsMidData.zc = z;
        }
      });
    },

    // 经费
    getRecordFunding() {
      getQueryBodyByProduce({
        tableId: 574
      }).then(res => {
        const data = res.data;
        if (res.success && data && typeof data === 'object') {
          data.forEach((item, index) => {
            this.rightTopList[index].title = item.XMZJXZ;
            this.rightTopList[index].num = item.EJXMJE;
          });
        }
      });
    },

    // 行政补助各项目排名 (万元)
    getTableData() {
      getQueryBodyByProduce({
        pageIndex: 0,
        pageSize: 50,
        pageType: 1,
        tableId: 577
      }).then(res => {
        if (res.success) {
          this.getTable(
            res.data.map(item => [item.XMMC, item.ZYS])
          );
        }
      });
    },

    getLeft() {
      getQueryBodyByProduce({
        filterList: [],
        pageIndex: 0,
        pageSize: 15,
        pageType: 1,
        tableId: 572
      }).then(res => {
        if (res.success) {
          res.data.forEach(item => {
            this.leftList.ENTERPRISENAME.unshift(item.ENTERPRISENAME);
            this.leftList.SR.unshift(item.SR);
            this.leftList.ZC.unshift(item.ZC);
          });
          this.leftListFu.SR = this.leftList.SR;
          this.leftListFu.ZC = this.leftList.ZC;
        } else {
          this.$message({
            showClose: true,
            message: res.message,
            type: 'warning'
          });
        }
      });
    },
    getMidTop() {
      getQueryBodyByProduce({
        filterList: [],
        pageIndex: 0,
        pageSize: 15,
        pageType: 1,
        tableId: 573
      }).then(res => {
        if (res.success) {
          res.data.forEach(item => {
            this.midTopList[0].num = item.SRYSWY;
            this.midTopList[1].num = item.SRSJWY;
            this.midTopList[2].num = item.WCL;
            this.midTopList[3].num = item.ZCYSWY;
            this.midTopList[4].num = item.SJZCWY;
            this.midTopList[5].num = item.ZHL;
          });
        } else {
          this.$message({
            showClose: true,
            message: res.message,
            type: 'warning'
          });
        }
      });
    },
    getTable(data) {
      this.config = {
        data,
        header: ['项目名称', '总预算'],
        headerBGC: '#58a3e0',
        columnWidth: [4000, 2000],
        align: ['left', 'left', 'left', 'left'],
        oddRowBGC: 'transparent',
        evenRowBGC: 'transparent',
        rowNum: 8
      };
    },
    goRouteBtn(tilte, name, code) {
      const { title } = this.$route.query;
      this.menuList.forEach(item => {
        if (item.meta.title === tilte) {
          if (item.children) {
            item.children.forEach(chit => {
              if (chit.meta.title === tilte) {
                const params = {
                  path: chit.path,
                  query: {
                    title: chit.meta.title,
                    menuId: chit.id,
                    flag: 0,
                    // isShow: isShow,
                    sId: 'TabsTable',
                    isHideLeft: chit.isHideLeft,
                    isHideTop: chit.isHideTop,
                    [code]: name,
                    parentTitle: chit.parentTitle,
                    routeTitle: title
                  }
                };
                this.$router.push(params);
              } else {
                const params = {
                  path: chit.path,
                  query: {
                    title: chit.meta.title,
                    menuId: chit.id,
                    flag: 0,
                    // isShow: isShow,
                    sId: 'TabsTable',
                    isHideLeft: chit.isHideLeft,
                    isHideTop: chit.isHideTop,
                    [code]: name,
                    parentTitle: chit.parentTitle,
                    routeTitle: title
                  }
                };
                this.$router.push(params);
              }
            });
          } else {
            const params = {
              path: item.path,
              query: {
                title: item.meta.title,
                menuId: item.id,
                flag: 0,
                // isShow: isShow,
                sId: 'TabsTable',
                isHideLeft: item.isHideLeft,
                isHideTop: item.isHideTop,
                [code]: name,
                parentTitle: item.parentTitle,
                routeTitle: title
              }
            };
            this.$router.push(params);
          }
        }
      });
    },
    getECard(val) {
      this.goRouteBtn('E码通管', val.row[0], 'PROGRAMNAME2');
    },
    getDetails(val) {
      if (val === '齐贤') {
        this.menuId = 1624524426396;
        this.title = '风险处置';
        this.filterList = [{ col: 'CLZT',
          value: '未处理' }];
        this.formGuid = '';
        this.tableVisible = true;
      }
    },
    tableCancel() {
      this.tableVisible = false;
    },
    tableOk() {
      this.tableVisible = false;
    }
  }
};
</script>
<style lang="scss" scoped>
$vw: 1920px;
@function px2vw($px) {
  @return $px / $vw * 100vw;
}
.Main_box {
  height: 100%;
  display: flex;
  justify-content: space-between;
}
.main_left {
  width: 24%;
  height: 100%;
  background: url("~@/assets/img/townPreview/路径.png") 0 0 no-repeat;
  background-size: 100% 100%;
  border-radius: 21px;
  overflow: hidden;
  .title_top {
    padding-left: 33px;
    height: 8%;
    font-size: px2vw(18px);
    color: #1fd2ff;
    display: flex;
    align-items: center;
  }
  .left_zhu {
    padding-left: 33px;
    height: 92%;
  }
}
.main_mid {
  width: 50%;
  height: 100%;
  .main_mid_top {
    height: 24%;
    display: flex;
    justify-content: space-between;
    align-content: space-between;
    flex-wrap: wrap;
    .top_list {
      display: flex;
      background: url("~@/assets/img/townPreview/矩形.png") 0 0 no-repeat;
      background-size: 100% 100%;
      justify-content: space-around;
      align-items: center;
      width: 32%;
      height: 47%;
      p {
        color: #4ca7ed;
        font-size: px2vw(16px);
        margin: 0;
      }
      span {
        font-size: px2vw(36px);
        color: #e9d500;
      }
    }
  }
  .main_mid_map {
    height: 54.5%;
    margin-top: 1.5%;
    margin-bottom: 1%;
    background: url("~@/assets/img/townPreview/镇街照片.png") no-repeat;
    background-size: 100% 100%;
    position: relative;
    border-radius: 21px;
    overflow: hidden;
    .btn3 {
      position: absolute;
      left: 31px;
      bottom: 21px;
      .btnlist {
        img {
          width: 30px;
          height: 30px;
          margin-right: 5px;
        }
        display: flex;
        align-items: center;
        .btn0 {
          color: #4ca7ed;
          display: flex;
          align-items: center;
        }
        .btn1 {
          color: #ff6b00;
          display: flex;
          align-items: center;
        }
        .btn2 {
          color: #d40000;
          align-items: center;

          display: flex;
        }
        span {
          font-size: px2vw(20px);
          margin-right: 5px;
        }
        p {
          font-size: px2vw(34px);
          margin-bottom: 0;
        }
      }
    }
    .icon {
      width: px2vw(31px);
      height: px2vw(31px);
      opacity: 1;
      background: rgba(136, 182, 232, 0.8);
      border: 1px solid #0169d4;
      border-radius: 50%;
      box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.5);
      color: white;
      line-height: px2vw(31px);
      text-align: center;
      position: absolute;
      z-index: 10000;
      cursor: pointer;
    }
    .icon::before {
      content: "";
      display: block;
      width: px2vw(16px);
      height: px2vw(16px);
      opacity: 1;
      border-bottom: 2px solid #e9d500;
      border-left: 2px solid #e9d500;
      transform: rotate(-45deg);
      box-shadow: -2px 3px 5px -2px rgba(32, 32, 32, 0.5);
      position: absolute;
      background: transparent;
      left: 20%;
      z-index: 3;
      bottom: -30%;
    }
    // .icon::after {

    //    content: "";
    //   display: block;
    //   width: px2vw(12px);
    //   height: px2vw(12px);
    //   opacity: 1;
    //   border-bottom: 1px solid #e9d500;
    //   border-left: 1px solid #e9d500;
    //   transform: rotate(-45deg);
    //   box-shadow: -2px 3px 5px -2px rgba(0, 0, 0, 0.5);
    //   position: absolute;
    //   background: transparent;
    //   left: 26%;
    //   z-index: 3;
    //   bottom: -44%;
    // }
  }
  .main_mid_bot {
    background: url("~@/assets/images/fullscreen/路径备份 2.png") no-repeat;
    background-size: 100% 100%;
    height: 19%;
    padding-left: 24px;
    border-radius: 21px;
    overflow: hidden;
    position: relative;
    .title_bot {
      height: 25%;
      color: #1fd2ff;
      font-size: px2vw(18px);
      line-height: 40px;
    }
    .main_Mid_zhu {
      height: 75%;
    }
  }
}
.main_right {
  width: 24%;
  height: 100%;
  .main_right_top {
    height: 25%;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .main_right_list {
      width: 48%;
      height: 45%;
      background: url("~@/assets/img/townPreview/矩形.png") no-repeat;
      background-size: 100% 100%;
      color: #1fd2ff;

      p {
        padding-left: 8px;
        height: 41%;
        font-size: px2vw(16px);
        background: rgba(24, 144, 255, 0.45);
        border-radius: 8px 8px 0px 0px;
        display: flex;
        align-items: center;
        margin: 0;
      }
      span {
        padding-left: 8px;
        font-size: px2vw(24px);
        display: flex;
        align-items: center;
      }
    }
  }
}
.main_right_bot {
  height: 74%;
  margin-top: 1%;
  background: url("~@/assets/img/townPreview/路径.png") no-repeat;
  background-size: 100% 100%;
  border-radius: 21px;
  overflow: hidden;
  .title_right {
    padding-right: 18px;
    justify-content: space-between;
    height: 8%;
    display: flex;
    align-items: center;
    padding-left: 25px;
    padding-top: 2%;
    img {
      margin-right: 8px;
      vertical-align: bottom;
    }
    h3 {
      color: #1fd2ff;
      font-size: px2vw(18px);
      font-family: PingFangSC, PingFangSC-Medium;
      font-weight: 500;
      margin: 0;
    }
    .title_list {
      display: flex;
      height: 60%;
      align-items: center;
    }
    .details_right {
      border: 1px solid #1fd2ff;
      border-radius: 3px;
      padding: px2vw(4px) px2vw(10px);
      color: #1fd2ff;
      font-size: px2vw(14px);
      cursor: pointer;
    }
  }
  .table_list {
    margin-top: 1%;
    height: 91%;
    padding: 0 12px;
  }
}

/deep/.dv-scroll-board .row-item {
  &:hover {
    background: rgba(91, 143, 249, 0.35);
  }
}
// .animated.infinite{
//       animation-delay: 2s;
//     animation-duration: 6s;
// }
/deep/.dv-scroll-board {
  .rows {
    .row-item {
      cursor: pointer;

      &:hover {
        background: rgba(91, 143, 249, 0.35) !important;
        border-radius: 10px 0px 0px 10px !important;
      }
    }
  }
//   .header-item{
// text-align: left!important;
//   }
}
/deep/.ant-modal-title{
  font-size: 28px;
  color: #1fd2ff;
}
/deep/.ant-modal-body>.digital{
height: px2vw(380px)!important;
// padding-bottom: 10px;
}
/deep/.table_vxe{
  height: 75%!important;
  // .vxe-table--body-wrapper{
  //   // height: calc(75% - 56px)!important;
  // }
  // .vxe-table--fixed-left-wrapper{
  //   // height: calc(75% - 56px)!important;
  // }
}
/deep/.digital-report>.digital-report-body{
height: calc(100% - 100px)!important;
margin-bottom: 10px!important;
}
/deep/.ant-modal-header ,/deep/.ant-modal-content{
background:#031a3a!important;
}
</style>
